<template>
  <div v-if="totalPages > 1" class="pagination-container">
    <button class="nav-button" :disabled="currentPage === 1" @click="changePage(currentPage - 1)">
      <i class="ri-arrow-left-s-line"></i>
    </button>
    <ul class="page-list">
      <li
        v-for="page in pages"
        :key="page"
        class="page-item"
        :class="{ active: page === currentPage, dots: page === '...' }"
        @click="changePage(page)"
      >
        {{ page }}
      </li>
    </ul>
    <button
      class="nav-button"
      :disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
    >
      <i class="ri-arrow-right-s-line"></i>
    </button>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  total: { type: Number, required: true },
  currentPage: { type: Number, required: true },
  pageSize: { type: Number, default: 10 },
  maxVisibleButtons: { type: Number, default: 5 },
})

const emit = defineEmits(['page-change'])

const totalPages = computed(() => Math.ceil(props.total / props.pageSize))

const pages = computed(() => {
  const max = props.maxVisibleButtons
  const current = props.currentPage
  const total = totalPages.value
  const pagesArr = []

  if (total <= max) {
    for (let i = 1; i <= total; i++) {
      pagesArr.push(i)
    }
    return pagesArr
  }

  pagesArr.push(1)

  let start = Math.max(2, current - Math.floor((max - 3) / 2))
  let end = Math.min(total - 1, start + max - 3)

  if (current > total - Math.floor((max - 1) / 2)) {
    start = total - max + 2
    end = total - 1
  }

  if (start > 2) {
    pagesArr.push('...')
  }

  for (let i = start; i <= end; i++) {
    pagesArr.push(i)
  }

  if (end < total - 1) {
    pagesArr.push('...')
  }

  pagesArr.push(total)

  return pagesArr
})

function changePage(page) {
  if (page === '...' || page < 1 || page > totalPages.value) return
  emit('page-change', page)
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8em;
  margin-top: 2.5em;
  user-select: none;
}
.page-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.5em;
}

.page-item,
.nav-button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.5em;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-medium);
  background: var(--bg-base);
  color: var(--text-regular);
  font-size: 0.9em;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
}

.nav-button {
  font-size: 1.2em;
}
.nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-light);
}

.page-item:not(.dots):hover,
.nav-button:not(:disabled):hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.page-item.active {
  background: var(--color-primary);
  color: #fff !important;
  border-color: var(--color-primary);
  font-weight: 600;
}
.page-item.dots {
  border: none;
  background: transparent;
  cursor: default;
}
</style>
